﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>计算属性</title>

		<script src="../vue/dist/vue.js"></script>

    </head>
    <body>
	
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
  <div>全名 </div>
  <div>{{ fullName }}</div>
</div>

    </body>

<script type="text/javascript">
<!--

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello',
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    },
	fullName: {
		// getter
		get: function () {
		  return this.firstName + ' ' + this.lastName
		},
		// setter
		set: function (newValue) {
		  var names = newValue.split(' ')
		  this.firstName = names[0]
		  this.lastName = names[names.length - 1]
		}
	  }
  }
})


</script>

</html>
